import { ref } from 'vue';
import OpenSeadragon, { Button, Options, OSDEvent } from 'openseadragon';
import type { SlideInfo } from './type.d';

export default function useContentViewer() {
    // 容器dom
    const viewerRef = ref();

    // 创建容器变量用于后续操作
    const viewer = ref();

    // 图片相关信息值
    const slideInfo = ref<SlideInfo>(null!);

    // 创建容器的配置对象options
    const options = ref<Options>({
        id: "viewer",
        tileSources: `http://10.190.189.11:8090/slide/api/data/whole-slide-file/develop6/develop6/deveadmin/slide/20221018220109565-070530.svs.dzi`,
        showNavigator: true, //是否显示导航缩略图
        animationTime: 0.5, //放大或缩小动画过渡的时间，这个值越小，过渡快
        blendTime: 0.1, //初始化白屏时间
        constrainDuringPan: false, // 规定了图像是否能被拖拽出允许最小范围
        panHorizontal: false, // 水平移动约束
        panVertical: false, // 垂直移动约束
        showNavigationControl: false, //基础控件的展示与隐藏
        showZoomControl: false, //显示放大和缩小按钮
        showHomeControl: false, //显示回到主位置按钮
        showFullPageControl: false, //显示全屏按钮
        showRotationControl: false, //显示左旋转和右旋转按钮  只有在支持的浏览器上才可以正常显示
        showFlipControl: false, //显示镜像翻转按钮
        showReferenceStrip: false, //显示图像缩略图滚动条
        showSequenceControl: false, //显示向前向后按钮
        // debugMode: true,
        // defaultZoomLevel: 5,
        sequenceMode: false, // 是否为多张图像的图象源 false为单张 true为多张
        navigatorPosition: 'BOTTOM_LEFT', ///导航所在位置 若为ABSOLUTE，可根据需求指定位置navigatorTop，navigatorLeft，  且会忽略下边两个属性若为其他，则会根据下边的属性或者导航的宽高确定导航的大小
        navigatorDisplayRegionColor: "#0915F5", //导航中，当前查看区域的边框颜色
        navigatorHeight: 200,
        navigatorWidth: 200,
        navigatorAutoResize: false,
        maxZoomPixelRatio: 2, //最大放大倍率，窗口的百分比
        minZoomImageRatio: 0.5,
        maxZoomLevel: 80, //最大放大倍数
        visibilityRatio: 0, //0-1之间，0代表图片可完全拖出显示框，1代表图片一点也不可以拖出
        zoomPerScroll: 1, //滚轮放大倍率，设置为1  则代表禁用滚轮事件   同gestureSettingsMouse.scrollToZoom
        autoHideControls: false, //焦点不在图像时是否自动隐藏自带工具栏
        timeout: 120000, //加载超时时间
        previousButton: "preBtn",
        nextButton: "nextBtn",
        initialPage: 1,
        maxImageCacheCount: 200,
        gestureSettingsMouse: {
            clickToZoom: false, //是否开启鼠标单击放大事件 fasle不可点击 true可以点击
            dblClickToZoom: false, //是否开启双击事件,如果将此设置为true   那么应该禁用单击事件
        },
        mouseNavEnabled: 1,
        crossOriginPolicy: 'Anonymous',
        // overlays: [
        //     {
        //         id: 'canvas',
        //         px: 1,
        //         py: 1,
        //         width: 1,
        //         height: 1
        //     }
        // ]
    });

    // 大图容器鼠标事件
    const mouseTracker = ref<OpenSeadragon.MouseTracker>();

    // 初始化创建切片预览对象
    const initViewer = () => {
        viewer.value = new OpenSeadragon.Viewer(options.value);
        mouseTracker.value = new OpenSeadragon.MouseTracker({
            element: options.value.id!
        })
    };

    // 获取图片的info
    const getInfo = () => {
        // const res = await axios.get('http://10.190.189.11:8090/slide/api/data/whole-slide-file/develop6/develop6/deveadmin/slide/20221018220109565-070530.svs.slideinfo');
        // let oajax = new XMLHttpRequest();
        // oajax.open('get', 'http://10.190.189.11:8090/slide/api/data/whole-slide-file/develop6/develop6/deveadmin/slide/20221018220109565-070530.svs.slideinfo', true);
        // oajax.send();
        // oajax.onreadystatechange = () => {
        //     if (oajax.readyState === 4) {
        //         if (oajax.status === 200 || oajax.status === 304) {
        //             console.log(oajax.responseText);
        //             // const res = new Parser();
        //             // console.log(imgDom);
        //             const res = {
        //                 Magnification: '20',
        //                 Mpp: '0.251471',
        //                 Width: '37888',
        //                 Height: '34304'
        //             }
        //         }
        //     }
        // }
        const res = {
            Magnification: '20',
            Mpp: '0.251471',
            Width: '37888',
            Height: '34304'
        }
        return res;
    };

    return {
        viewerRef,
        viewer,
        options,
        slideInfo,
        mouseTracker,
        initViewer,
        getInfo
    }
}